<template>
    <div class="vadio">
        <div class="img">
            <a :href="list.href"><img :src="list.img" alt=""></a>
            <p><span>{{list.name}}</span><span><i class="iconfont icon-redu"></i>{{list.heat}}万</span></p>
        </div>
        <h5>{{list.text}}</h5>
    </div>
</template>
<style lang="scss" scoped>
    .vadio {
        margin: 10px;
        width: 165px;
        .img {
            position: relative;
            font-size: 12px;
            img {
                width: 100%;
                border-radius: 5px;
            }
            p {
                display: flex;
                justify-content: space-between;
                width: 90%;
                color: #fff;
                position: absolute;
                left: 7px;
                bottom: 8px;
                
            }
        }
        h5 {
            font-weight: normal;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 5px;
            
        }
    }
</style>


<script>
export default {
    props: [ 'list' ],
    data() {
        return {
            
        }
    }
}
</script>